<template>
	<view class="scroll-list-item item">
		<svg class="horn leftTop" xmlns="http://www.w3.org/2000/svg" width="38" height="41" viewBox="0 0 38 41" fill="none">
			<path d="M1 41V10.5L10.5 1H37.5" stroke="#8C8CA4" stroke-width="2" />
		</svg>
		<svg class="horn rightTop" xmlns="http://www.w3.org/2000/svg" width="38" height="41" viewBox="0 0 38 41" fill="none">
			<path d="M37 41V10.5L27.5 1H0.5" stroke="#8C8CA4" stroke-width="2" />
		</svg>
		<svg class="horn rightBottom" xmlns="http://www.w3.org/2000/svg" width="38" height="41" viewBox="0 0 38 41" fill="none">
			<path d="M37 0V30.5L27.5 40H0.5" stroke="#8C8CA4" stroke-width="2" />
		</svg>
		<svg class="horn leftBottom" xmlns="http://www.w3.org/2000/svg" width="38" height="41" viewBox="0 0 38 41" fill="none">
			<path d="M1 0V30.5L10.5 40H37.5" stroke="#8C8CA4" stroke-width="2" />
		</svg>
		<svg class="decorate" xmlns="http://www.w3.org/2000/svg" width="57" height="14" viewBox="0 0 57 14" fill="none">
			<g filter="url(#filter0_d_57_15876)">
				<path d="M6 1H51" stroke="#F2CB29" stroke-width="2" />
			</g>
			<defs>
				<filter id="filter0_d_57_15876" x="0.3" y="0" width="56.4" height="13.7" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
					<feFlood flood-opacity="0" result="BackgroundImageFix" />
					<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
					<feOffset dy="6" />
					<feGaussianBlur stdDeviation="2.85" />
					<feComposite in2="hardAlpha" operator="out" />
					<feColorMatrix type="matrix" values="0 0 0 0 0.94902 0 0 0 0 0.796078 0 0 0 0 0.160784 0 0 0 1 0" />
					<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_57_15876" />
					<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_57_15876" result="shape" />
				</filter>
			</defs>
		</svg>
		<svg class="arrow arrow-down" xmlns="http://www.w3.org/2000/svg" width="32" height="13" viewBox="0 0 32 13" fill="none">
			<path d="M32 0H0L16 13L32 0Z" fill="#F2CB29" />
		</svg>
		<svg class="arrow arrow-up" xmlns="http://www.w3.org/2000/svg" width="32" height="13" viewBox="0 0 32 13" fill="none">
			<path d="M0 13L32 13L16 -1.39876e-06L0 13Z" fill="#F2CB29" />
		</svg>
		<view class="line-horizontal top"></view>
		<view class="line-horizontal bottom"></view>
		<view class="line-vertical left"></view>
		<view class="line-vertical right"></view>
		<svg class="mask" xmlns="http://www.w3.org/2000/svg" width="267" height="407" viewBox="0 0 267 407" fill="none">
			<path d="M10.8097 0L0 10V397L10.8097 407H256.19L267 397V10L256.19 0H10.8097Z" fill="url(#paint0_linear_54_15864)" />
			<defs>
				<linearGradient id="paint0_linear_54_15864" x1="133.5" y1="0" x2="133.5" y2="407" gradientUnits="userSpaceOnUse">
					<stop stop-color="#3C3C40" />
					<stop offset="1" stop-color="#2C2C36" />
				</linearGradient>
			</defs>
		</svg>
		<view class="content uv-flex-column" v-if="!custom">
			<view class="pic" :style="[{backgroundImage: `url(${logo})`}]">
			</view>
			<view class="title">
				<view class="inner" :style="{height: boxHeight}">
					<view class="text" :id="idName">
						<text>{{name}}</text>
						<text>{{desc}}</text>
					</view>
				</view>
			</view>
			<view class="progress uv-flex-column">
				<uv-line-progress :percentage="percentage" height="6px" activeColor="#F2CB29" inactive-color="#58587C" :showText="false"></uv-line-progress>
				<view class="info uv-flex-row">
					<text>已完成{{progress.completeCourseCount}}/{{progress.courseCount}}</text>
					<text>{{percentage}}%</text>
				</view>
			</view>
			<!-- 标签 -->
			<view class="mark" v-if="mark">
				<text :style="{fontSize: mark.length>=5?'12px':'14px'}">{{mark}}</text>
				<svg xmlns="http://www.w3.org/2000/svg" width="92" height="58" viewBox="0 0 92 58" fill="none">
					<g filter="url(#filter0_d_315_6426)">
						<path d="M10 44V8C10 6.89543 10.8954 6 12 6H80C81.1046 6 82 6.89543 82 8V44L46 35L10 44Z" fill="#32323A" />
						<path d="M11 42.7192V8C11 7.44772 11.4477 7 12 7H80C80.5523 7 81 7.44772 81 8V42.7192L46.2425 34.0299L46 33.9692L45.7575 34.0299L11 42.7192Z" stroke="#8C8CA4" stroke-width="2" />
					</g>
					<defs>
						<filter id="filter0_d_315_6426" x="0" y="0" width="92" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
							<feFlood flood-opacity="0" result="BackgroundImageFix" />
							<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
							<feOffset dy="4" />
							<feGaussianBlur stdDeviation="5" />
							<feComposite in2="hardAlpha" operator="out" />
							<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0.5 0" />
							<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_315_6426" />
							<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_315_6426" result="shape" />
						</filter>
					</defs>
				</svg>
			</view>
			<!-- 当前位置 -->
			<view class="address uv-flex-row" v-if="currentAddress">
				<svg t="1720923319323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4338" width="12" height="12">
					<path
						d="M731.546 588.952C782.032 501.857 806 432.632 806 384c0-162.372-131.628-294-294-294S218 221.628 218 384c0 48.633 23.968 117.857 74.454 204.952C341.914 674.28 415.131 773.963 512 887.432c96.869-113.469 170.085-213.153 219.546-298.48zM549.64 981.52a50 50 0 0 1-4.727 4.727c-20.788 18.177-52.375 16.06-70.553-4.727C243.453 717.45 128 518.277 128 384 128 171.923 299.923 0 512 0s384 171.923 384 384c0 134.277-115.453 333.45-346.36 597.519zM512 544c88.366 0 160-71.634 160-160s-71.634-160-160-160-160 71.634-160 160 71.634 160 160 160z m0-90c-38.66 0-70-31.34-70-70s31.34-70 70-70 70 31.34 70 70-31.34 70-70 70z"
						p-id="4339" fill="#A2A2CF"></path>
				</svg>
				<text>当前位置</text>
			</view>
		</view>
		<view class="content content-custom uv-flex-column" v-else @click="customClick">
			<view class="bd">
				<view class="add-icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94" viewBox="0 0 94 94" fill="none">
						<g filter="url(#filter0_d_354_6524)">
							<path d="M42 64L19 41.0033V31.0048L42 8H52L75 30.9967V40.9952L52 63.9919H42V64Z" fill="url(#paint0_linear_354_6524)" />
							<path d="M42.4061 62.9919L20 40.5891V31.4189L42.4143 9H51.5858L74 31.4109V40.581L51.5858 62.9919H42.4061Z" stroke="#545477" stroke-width="2" />
						</g>
						<defs>
							<filter id="filter0_d_354_6524" x="0.9" y="0.9" width="92.2" height="92.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
								<feFlood flood-opacity="0" result="BackgroundImageFix" />
								<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
								<feOffset dy="11" />
								<feGaussianBlur stdDeviation="9.05" />
								<feComposite in2="hardAlpha" operator="out" />
								<feColorMatrix type="matrix" values="0 0 0 0 0.691784 0 0 0 0 0.691784 0 0 0 0 0.920991 0 0 0 0.26 0" />
								<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_354_6524" />
								<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_354_6524" result="shape" />
							</filter>
							<linearGradient id="paint0_linear_354_6524" x1="47" y1="8" x2="47" y2="64" gradientUnits="userSpaceOnUse">
								<stop stop-color="#1D1D1F" />
								<stop offset="1" stop-color="#333337" />
							</linearGradient>
						</defs>
					</svg>
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M14 10V0H10V10L0 10V14L10 14V24H14V14L24 14V10L14 10Z" fill="#7F7FB2" />
					</svg>
				</view>
			</view>
			<view class="title">
				<view>
					<view class="text">
						<text>添加自定义课程</text>
						<text>添加更多自定义内容</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { computed, ref, onMounted, reactive } from 'vue';
	import { animateHeight } from '@/common/utils/index.js';
	const emits = defineEmits(['customClick']);
	const guid = uni.$uv.guid();
	const idName = ref(`name_${guid}`);
	const innerHeight = ref(0);
	const boxHeight = ref(0);
	onMounted(() => {
		boxHeight.value = document.getElementsByClassName('inner')[0]?.clientHeight + 'px';
		innerHeight.value = document.getElementById(idName.value)?.clientHeight + 4 + 'px';
	})
	const props = defineProps({
		logo: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		},
		desc: {
			type: String,
			default: ''
		},
		mark: {
			type: String,
			default: ''
		},
		currentAddress: {
			type: Boolean,
			default: false
		},
		custom: {
			type: Boolean,
			default: false
		},
		progress: {
			type: Object,
			default () {
				return {
					completeCourseCount: 0,
					courseCount: 1
				}
			}
		}
	})
	const percentage = computed(() => {
		return Math.floor(props.progress.completeCourseCount / props.progress.courseCount * 100);
	})

	function customClick() {
		emits('customClick');
	}
</script>
<style>
	.scroll-list-item .content>>>.uv-line-progress,
	.scroll-list-item .content>>>.uv-line-progress .uv-line-progress__background,
	.scroll-list-item .content>>>.uv-line-progress .uv-line-progress__line {
		border-radius: 0;
	}
</style>
<style scoped lang="scss">
	.scroll-list-item {
		position: relative;
		width: 266px;
		height: 406px;
		transition: all 0.4s cubic-bezier(0.26, 0.63, 0.35, 0.95) 0s;
		box-shadow: 0 8px 18px #3C3C41;
		border-radius: 18px;
		.horn {
			position: absolute;
			&.leftTop {
				left: 0;
				top: 0;
			}
			&.leftBottom {
				left: 0;
				bottom: 0;
			}
			&.rightTop {
				right: 0;
				top: 0;
			}
			&.rightBottom {
				right: 0;
				bottom: 0;
			}
		}
		.decorate {
			position: absolute;
			top: 0;
			left: 40px;
		}
		.arrow {
			opacity: 0;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			transition: all 0.4s cubic-bezier(0.26, 0.63, 0.35, 0.95) 0s;
			&-down {
				top: -24px;
			}
			&-up {
				bottom: -24px;
			}
		}
		.line-horizontal {
			position: absolute;
			left: 48px;
			right: 48px;
			height: 2px;
			background: rgba(140, 140, 164, 0.3);
			&.top {
				top: 0;
			}
			&.bottom {
				bottom: 0;
			}
		}
		.line-vertical {
			position: absolute;
			top: 48px;
			bottom: 48px;
			width: 2px;
			background: rgba(140, 140, 164, 0.3);
			&.left {
				left: 0;
			}
			&.right {
				right: 0;
			}
		}
		.mask {
			width: 100%;
			height: 100%;
		}
		&:hover {
			transform: scale(1.14);
			box-shadow: 0 8px 24px #5C5C6B;
			cursor: pointer;
			.arrow {
				opacity: 1;
			}
			.inner {
				height: v-bind(innerHeight) !important;
				background: rgba(0, 0, 0, 0.5);
				text {
					opacity: 1 !important;
				}
			}
		}
		.content {
			position: absolute;
			left: 2px;
			top: 2px;
			right: 2px;
			bottom: 2px;
			padding: 18px;
			.pic {
				width: 230px;
				height: 220px;
				margin: 0 auto;
				background-size: cover;
				border-radius: 6px 5px 0 0;
				flex-shrink: 0;
			}
			.title {
				position: relative;
				z-index: 2;
				flex: 1;
				width: 230px;
				margin: 18px 0;
				.inner {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					min-height: 100%;
					padding: 4px 0;
					transition: all 0.4s cubic-bezier(0.26, 0.63, 0.35, 0.95) 0s;
					overflow: hidden;
				}
				text {
					line-height: 20px;
					&:first-child {
						font-size: 24px;
						color: #fff;
					}
					&:last-child {
						display: block;
						padding-top: 6px;
						opacity: 0.4;
						font-size: 12px;
						color: #fff;
					}
				}
			}
			.progress {
				justify-content: center;
				padding-bottom: 6px;
				.info {
					margin-top: 10px;
					justify-content: space-between;
					text {
						word-break: break-all;
						font-size: 14px;
						color: #fff;
					}
				}
			}
			.mark {
				position: absolute;
				top: -14px;
				right: 6px;
				text {
					position: absolute;
					left: 50%;
					top: 34%;
					transform: translate(-50%, -50%);
					width: 100%;
					text-align: center;
					font-size: 14px;
					color: #45B86C;
				}
			}
			.address {
				align-items: center;
				position: absolute;
				left: 20px;
				top: 20px;
				z-index: 1;
				height: 28px;
				padding: 0 8px 0 4px;
				border-radius: 4px;
				background: #32323A;
				text {
					margin-left: 2px;
					font-size: 12px;
					color: #A2A2CF;
				}
			}
			&-custom {
				background: url('/static/images/chapter/dot-bg.png') no-repeat center center;
				background-size: cover;
				.bd {
					flex: 1;
				}
				.title {
					height: 68px;
					flex: 0 0 auto;
					text-align: center;
				}
				// 自定义内容
				.add-icon {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 56px;
					height: 56px;
					svg:nth-child(1) {
						position: absolute;
						left: 50%;
						top: -8px;
						z-index: 1;
						transform: translateX(-50%);
					}
					svg:nth-child(2) {
						position: absolute;
						left: 50%;
						top: 50%;
						z-index: 2;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
	@media screen and (max-width: 1600px) {
		.scroll-list-item {
			width: 236px;
			height: 358px;
		}
		.scroll-list-item .content {
			padding: 10px;
		}
		.scroll-list-item .content .pic {
			width: 212px;
			height: 202px;
		}
		.scroll-list-item .content .title {
			width: 212px;
		}
		.scroll-list-item .content .title {
			margin: 6px 0 10px;
		}
		.scroll-list-item .content .title text:first-child {
			font-size: 20px;
		}
		.scroll-list-item .content .mark {
			transform: scale(0.95);
		}
	}
	@media screen and (max-width: 1200px) {
		.scroll-list-item {
			width: 210px;
			height: 318px;
		}
		.scroll-list-item .content {
			padding: 6px;
		}
		.scroll-list-item .content .pic {
			width: 194px;
			height: 185px;
		}
		.scroll-list-item .content .title {
			width: 194px;
		}
		.scroll-list-item .content .title {
			margin: 4px 0;
		}
		.scroll-list-item .content .title text:first-child {
			font-size: 18px;
		}
		.scroll-list-item .content .mark {
			transform: scale(0.8);
		}
	}
</style>